<template>
	<view class="device-page">
    <div class="search-box">
      <u-search v-model="searchValue" shape="round" @search="handleSearch" @custom="handleSearch"></u-search>
    </div>
    <div class="search-list">
      <div class="device-title">
        已连接设备
      </div>
      <div class="device-item-active" v-if="activeDevice.id">
        <view class="device-item-left">
          <image class="device-img" :src="activeDevice.image" />
        </view>
        <view class="device-item-right">
          <text class="device-name">{{ activeDevice.name }}</text>
          <text class="device-status">已连接</text>
        </view>
      </div>
      <div class="device-title">
        可连接设备
      </div>
      <div class="device-list" v-if="inactiveDevice.length">
        <view class="device-item" v-for="(item, index) in inactiveDevice" :key="index" @click="handleConnectDevice(item)">
          <view class="device-item-left">
            <image class="device-img" :src="item.image" />
          </view>
          <view class="device-item-right">
            <text class="device-name">{{ item.name }}</text>
          </view>
        </view>
      </div>
      <u-empty v-else text="无可用设备" mode="list"></u-empty>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        deviceList: [],
        searchValue: '',
        confirmSearchValue: '',
        // 连接的设备ID
        connectDeviceId:  '',
        member_id: ''
			}
		},
    onShow() {
      this.getMemberDetail()
      this.getDeviceList()
    },
    computed: {
      activeDevice() {
        return this.deviceList.find(item => item.id === this.connectDeviceId) || {}
      },
      inactiveDevice() {
        return this.deviceList.filter(item => item.id !== this.connectDeviceId && item.name.includes(this.confirmSearchValue))
      }
    },
		methods: {
     async getMemberDetail() {
        this.member_id = uni.getStorageSync('memberId')
        const memberDetail = await this.$api.memberDetail(this.member_id)
        this.connectDeviceId = memberDetail.device_id
      },
      getDeviceList() {
        // 获取设备列表
        this.$api.deviceList().then(res => {
          this.deviceList = res.map(item => {
            return {
              ...item,
              image: this.$baseUrl + item.image
            }
          })
        })
      },
      handleConnectDevice(item) {
        // 连接设备
        this.$api.collectDevice({
          device_id: item.id,
          // 解绑设备
          pre_device_id: this.connectDeviceId,
          member_id: this.member_id
        }).then(() => {
          this.connectDeviceId = item.id
        })
      },
      handleSearch() {
        this.confirmSearchValue = this.searchValue
      }
		}
	}
</script>

<style lang="scss">
.device-page {
  height: 100%;
  background-color: #F5F7FA;
}
.search-box {
  width: 100%;
  padding: 20rpx;
  .u-search {
    width: 100%;
  }
}
.search-list {
  padding: 0 20rpx;
}
.device-title {
  font-size: 28rpx;
  color: #666;
  margin: 20rpx 0
}
.device-item-active,
.device-item{
  // 已链接设备 有投影圆角卡片
  width: 100%;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  display: flex;
  .device-item-left {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    .device-img {
      width: 80rpx;
      height: 80rpx;
    }
  }
  .device-item-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .device-name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    .device-status {
      font-size: 24rpx;
      color: green;
    }
  }
}
.device-list {
  width: 100%;
  padding: 20rpx;
  .device-item {
    padding: 20rpx 0;
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
  }
}
</style>
